import React, { Component } from 'react';
import { View, Text, StatusBar, Image, TouchableOpacity } from 'react-native';
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
import { pxToDp } from '../../../utils/stylesKits';
import FriendHead from './components/FriendHead';
import Visitors from './components/Visitors';
import PerfectGirl from './components/PerfectGirl';
import request from "../../../utils/request";
import { FRIENDS_RECOMMEND, BASE_URI } from "../../../utils/pathMap";
import IconFont from "../../../components/IconFont";
import { Overlay } from "teaset";
import FilterPanel from "./components/FilterPanel";
import { NavigationContext } from "@react-navigation/native";

class Index extends Component {
    static contextType = NavigationContext;
    state = {
        // 接口要的数据
        params: {
            page: 1,
            pagesize: 100,
            gender: '男',
            distance: 2,
            lastLogin: '',
            city: '',
            education: ''
        },
        // 推荐朋友 数组
        recommends: []
    }

    componentDidMount() {
        this.getRecommends();
    }

    // 获取推荐朋友
    getRecommends = async (filterParams = {}) => {
        const res = await request.privateGet(FRIENDS_RECOMMEND, { ...this.state.params, ...filterParams });
        this.setState({ recommends: res.data })
    }

    // 点击事件 显示筛选浮层
    recommendFilterShow = () => {
        // 获取要传递的参数
        const { page, pagesize, ...others } = this.state.params;
        let overlayViewRef = null;
        let overlayView = (
            <Overlay.View
                modal={true}
                overlayOpacity={0.3}
                ref={v => overlayViewRef = v}
            >
                {/* 显示筛选组件 */}
                <FilterPanel onSubmitFilter={this.handleSubmitFilter} params={others} onClose={() => overlayViewRef.close()} />
            </Overlay.View>
        );
        Overlay.show(overlayView);
    }

    // 接收到了筛选组件传递过来的数据
    handleSubmitFilter = (filterParams) => {
        this.getRecommends(filterParams);
    }

    render() {
        const { recommends } = this.state;
        return (
            // 头部
            <HeaderImageScrollView
                maxHeight={pxToDp(170)}
                minHeight={pxToDp(44)}
                headerImage={require("../../../res/headfriend.png")}
                renderForeground={() => (
                    <View style={{ height: pxToDp(170), justifyContent: "center", alignItems: "center" }} >
                        <StatusBar backgroundColor={'transparent'} translucent={true} />
                        <FriendHead />
                    </View>
                )}
            >
                <View style={{ marginBottom: pxToDp(24) }}>
                    {/* 访客 */}
                    <Visitors />
                    <View style={{ height: pxToDp(1), backgroundColor: '#ccc' }}></View>
                    {/* 今日佳人 */}
                    <PerfectGirl />
                    {/* 推荐朋友 */}
                    <View>
                        {/* 标题 */}
                        <View style={{ height: pxToDp(40), backgroundColor: '#eee', flexDirection: 'row', justifyContent: 'space-between', paddingLeft: pxToDp(10), paddingRight: pxToDp(10), alignItems: 'center' }}>
                            <Text style={{ color: '#666' }}>推荐</Text>
                            <IconFont onPress={this.recommendFilterShow} style={{ color: '#666' }} name="iconshaixuan" />
                        </View>
                        {/* 列表内容 */}
                        <View>
                            {recommends.map((v, i) => <TouchableOpacity
                                onPress={() => this.context.navigate('Detail', { id: v.id })}
                                key={i}
                                style={{ flexDirection: 'row', paddingTop: pxToDp(15), paddingBottom: pxToDp(15), borderBottomWidth: pxToDp(1), borderColor: '#ccc' }}>
                                {/* 图片 */}
                                <View style={{ paddingLeft: pxToDp(15), paddingRight: pxToDp(15) }}>
                                    <Image style={{ width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25) }} source={{ uri: BASE_URI + v.header }} />
                                </View>
                                {/* 名称 */}
                                <View style={{ flex: 2, justifyContent: 'space-around', paddingLeft: pxToDp(10) }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                        <Text style={{ color: '#555' }}>{v.nick_name}</Text>
                                        <IconFont
                                            style={{ fontSize: pxToDp(18), color: v.gender === '男' ? '#b564bf' : 'red' }}
                                            name={v.gender === '女' ? 'icontanhuanv' : 'icontanhuanan'} />
                                        <Text style={{ color: '#555' }}>{v.age}岁</Text>
                                    </View>
                                    <View style={{ flexDirection: 'row' }}>
                                        <Text style={{ color: '#555' }}>{v.marry}</Text>
                                        <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                        <Text style={{ color: '#555' }}>{v.xueli}</Text>
                                        <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                        <Text style={{ color: '#555' }}>{v.agediff < 10 ? "年龄相仿" : "有点代沟"}</Text>
                                    </View>
                                </View>
                                {/* 缘分值 */}
                                <View style={{ flexDirection: 'row', alignItems: 'center', width: pxToDp(80) }}>
                                    <IconFont style={{ color: 'red', fontSize: pxToDp(30) }} name="iconxihuan" />
                                    <Text style={{ color: '#666' }}>{v.fateValue}</Text>
                                </View>
                            </TouchableOpacity>)}
                        </View>
                    </View>
                </View>
            </HeaderImageScrollView>
        );
    }
}

export default Index;